// import React from "../src/react";
// import ReactDOM from "../src/react-dom/client";
import React,{ useEffect, useLayoutEffect, useRef} from "react";
import ReactDOM from "react-dom/client";

function Counter (props) {
  return <h1>{props.count}</h1>
}

const MemoCounter = React.memo(Counter);


// class App extends React.Component{
//   state = { 
//     count: 0,
//     number: 1,
//   }

//   incrementCount = () => {
//     this.setState(prevState => ({
//       // count: prevState.count +1,
//       number: prevState.number + 1,
//     }))
//   }
  
//   render(){
//     return (
//       <div>
//         <MemoCounter count={this.state.count} />
//         <button onClick={this.incrementCount}>+</button>
//         <span>{ this.state.number }</span>
//       </div>
//     )
//   }
// }

function App(){
  const divRef = useRef();
  useLayoutEffect(() => {
    divRef.current.style.top = 200 + 'px';
    divRef.current.style.left = 200 + 'px';
    divRef.current.style.transition = 'all 10s';
  }, [])
  return (
    <div ref={divRef}
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'yellow',
        position: 'absolute',
        top: 0,
        left:0,
      }}>

    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
